<template>
  <div class="">
    <ul class="ul-box clearfix">
      <li v-for="(tag, index) in data" :key="index">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">
            <p>资产标签:{{ tag.tagName }}</p>
            <p>标签备注:{{ tag.tagRemark }}</p>
            <p>打标备注:{{ tag.remark }}</p>
          </div>
          <el-tag :closable="tag.edited == '1' && data.editTagFlag == 1 ? true : false" @close="closeTag(tag)">{{
            tag.tagName
          }}</el-tag>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
import { tagsDeleteApi } from "api/propertyManage";
export default {
  name: "secTags",
  props: {
    data: Array,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {
    closeTag(tag) {
      this.utils.$confirm({ content: `是否确认删除该指标（${tag.tagName}）` }, () => {
        tagsDeleteApi({ assetId: tag.assetId, tagCode: tag.tagCode }).then((res) => {
          let state = this.message.state(res);
          if (!state) return;
          this.$emit("refresh");
        });
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.ul-box {
  li {
    float: left;
    padding: 5px 10px;
  }
}
</style>
